<template>
    <div class="loginBox">
        <div><h1>卖家登录</h1></div>
        <div class="lform">
            <el-form :model="loginForm" status-icon :rules="rules" ref="loginForm" label-width="100px">
                <el-form-item label="登录账号" prop="userName">
                  <el-input v-model="loginForm.userName" autocomplete="off"></el-input>
                </el-form-item>
              <el-form-item label="登录密码" prop="userPass">
                <el-input type="password" v-model="loginForm.userPass" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item>
                  <div>
                      <el-button type="text" @click="handleRegist">我要注册</el-button>
                      &nbsp;
                      <el-button type="text" @click="handleForget">忘记密码</el-button>
                  </div>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="handleLogin()">提交</el-button>
                <el-button @click="resetLoginForm()">重置</el-button>
              </el-form-item>
            </el-form>
        </div>
        
        <!-- 注册对话框 -->
        <el-dialog title="卖家注册" width="600px" :visible.sync="regFormVisible">
          <el-form :model="regForm" ref="regForm" :rules="regRules">
            <el-form-item label="手机号" :label-width="formLabelWidth" prop="mobile">
              <el-input v-model="regForm.mobile" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="登录密码" :label-width="formLabelWidth" prop="password1">
              <el-input type="password" v-model="regForm.password1" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" :label-width="formLabelWidth" prop="password2">
              <el-input type="password" v-model="regForm.password2" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="公司名" :label-width="formLabelWidth" prop="name">
              <el-input v-model="regForm.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="营业执照号" :label-width="formLabelWidth" prop="licenseNumber">
              <el-input v-model="regForm.licenseNumber" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="法定代表人" :label-width="formLabelWidth" prop="legalPerson">
              <el-input v-model="regForm.legalPerson" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="法定代表人身份证" :label-width="formLabelWidth" prop="legalPersonCardId">
              <el-input v-model="regForm.legalPersonCardId" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="店铺名称" :label-width="formLabelWidth" prop="nickName">
              <el-input v-model="regForm.nickName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="公司地址" :label-width="formLabelWidth" prop="address">
              <el-input v-model="regForm.address" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="regFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="doSellerRegist">注 册</el-button>
          </div>
        </el-dialog>
    </div>
</template>

<script>
    import {sellerLogin,sellerAddUser} from '../api/api.js'
    export default {
        name: 'Login',
        data() {
            return {
                loginForm: {
                    userName: '',
                    userPass: ''
                },
                rules: {
                    userName: [
                        { required: true, message: '请输入登录账号', trigger: 'blur' }
                    ],
                    userPass: [
                        { required: true, message: '请输入登录密码', trigger: 'blur' }
                    ],
                },
                formLabelWidth: "140px",
                regFormVisible: false,
                regForm: {
                    
                },
                regRules: {
                    mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
                    password1: [{ required: true, message: '请输入登录密码', trigger: 'blur' }],
                    password2: [{ required: true, message: '请输入确认密码', trigger: 'blur' }],
                    name: [{ required: true, message: '请输入公司名称', trigger: 'blur' }],
                    licenseNumber: [{ required: true, message: '请输入营业执照号', trigger: 'blur' }],
                    legalPerson: [{ required: true, message: '请输入法定代表人', trigger: 'blur' }],
                    legalPersonCardId: [{ required: true, message: '请输入法定代表人身份证', trigger: 'blur' }],
                    nickName: [{ required: true, message: '请输入店铺名称', trigger: 'blur' }],
                    address: [{ required: true, message: '请输入公司地址', trigger: 'blur' }],
                }
            }
        },
        methods:{
            handleLogin() {
                 this.$refs['loginForm'].validate((valid) => {
                    if(valid) {
                        // 进行登录请求
                        console.log('可以登录了');
                        let param = {
                            userName: this.loginForm.userName,
                            passWord: this.loginForm.userPass
                        }
                        sellerLogin(param).then(res => {
                            console.log('userlogin', res);
                            if(res.data.code == 200) {
                                let token = res.data.data.token
                                let user = res.data.data
                                window.sessionStorage.setItem('token', token)
                                window.sessionStorage.setItem('user', JSON.stringify(user))
                                
                                this.$router.push('/')
                            }
                            else {
                                let msg = res.data.msg
                                this.$message(msg)
                            }
                        })
                    }
                    else {
                        console.log('还不能登录');
                        return false
                    }
                 })
            },
            resetLoginForm() {
                this.$refs['loginForm'].resetFields();
                // this.loginForm.userName = ''
                // this.loginForm.userPass = ''
            },
            handleRegist() {
                console.log('handleForget');
                this.regFormVisible = true
            },
            handleForget() {
                console.log('handleForget');
            },
            // 卖家注册
            doSellerRegist() {
                this.$refs['regForm'].validate((valid) => {
                    if(valid) {
                        if(this.regForm.password1 != this.regForm.password2) {
                            this.$message.error("两次输入密码不一致，请重新填写")
                            return false
                        }
                        this.regForm.password = this.regForm.password1
                        sellerAddUser(this.regForm).then(res=>{
                            if(res.data.code == 200) {
                                this.$message.success("注册成功")
                                this.regFormVisible = false
                            }
                            else {
                                let msg= res.data.msg
                                this.$message.error(msg)
                            }
                        })
                    }
                    else {
                        this.$message.error("输入有误，请重新填写")
                        return false;
                    }
                })
            }
        }
    }
</script>

<style>
    .loginBox {
        margin: auto;
        margin-top: 100px;
        text-align: center;
    }
    
    .lform {
        width: 600px;
        height: 400px;
        margin: auto;
        /* border: #2C3E50 solid 1px; */
    }
</style>
